<template>
    <div class="wrap">
        <ChangeHeader title="最火话题"></ChangeHeader>
    
        <div class="banner_img_wrap">
            <img class="banner_img" src="../images/mainOne/gambit/IMG_zuihuo_01.png"></img>
        </div>
    
        <div class="content">
            <h3>话题排行榜</h3>
            <div v-for="(item,index) in topicData" :key="index">
                <HotTopicItem v-bind:pic="item.top_pic" v-bind:icon="item.top_Icon" v-bind:des="item.des" v-bind:num="item.top_num" />
    
            </div>
    
        </div>
    </div>
</template>
<script>
import HotTopicItem from "../components/hotTopicItem.vue"
import ChangeHeader from "../components/changeHeader"




export default {
    name: "beautyExport",
    components: {
        HotTopicItem,
        ChangeHeader,
    },
    //组件创建完成后发送网络请求获取数据
    created() {
        var flag = this.$axios.defaults.baseURL == "http://localhost:3000"
        var url = flag ? "/hot_topic" : "/hot_topic.json"
        this.$axios.get(url)
            .then(res => {
                this.$data.topicData = res.data.data
                console.log(res.data)
            })
            .then(error => {
                console.log(error ? error : '')
            })
    },

    data() {
        return {
            topicData: []
        }
    }
}
</script>

<style lang='less' scoped>
@pub_main_bgcolor :#ff406f;
.headers {
    width: 100%;
    background: @pub_main_bgcolor;
    position: fixed;
    padding-top: 60/75rem;
    font-size: 36/75rem;
    z-index: 3;
    padding-bottom: 16/75rem;
    .headerNav {

        color: #fff;
    }
    .export {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        line-height: 60/75rem;
    }
    .arr {
        font-size: 44/75rem;
        line-height: 60/75rem;
    }
}

.banner_img_wrap {
    background: @pub_main_bgcolor;
    height: 300/72rem;
    width: 100%;
    margin-top: -2px;
    img {
        width: 709/75rem;
        height: 300/75rem;
    }
}

.banner_img {
    position: absolute;
    top: 157/75rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 1px 10px #888888;
    border-radius: 20px;
}


.content {
    margin-top: 200/75rem;

    h3 {
        font-size: 40/75rem;
        font-family: '宋体';
        text-align: center;
    }
}
</style>

